<template>
    <div class="app-container">
        <el-form :inline="true" :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="68px">
            <el-form-item label="发货日期">
              <el-date-picker type="daterange" v-model="queryParams.FHRQ" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="合同号">
                <el-input v-model="queryParams.HTH" size="small" placeholder="请输入合同号"/>
            </el-form-item>
            <el-form-item label="对应单号">
                <el-input v-model="queryParams.DYDH" size="small" placeholder="请输入对应单号"/>
            </el-form-item>
            <el-form-item label="发货单号">
                <el-input v-model="queryParams.FHDH" size="small" placeholder="请输入发货单号"/>
            </el-form-item>
            <el-form-item label="客户">
                <el-input v-model="queryParams.customer" size="small" placeholder="请输入客户"/>
            </el-form-item>
            <el-form-item label="销售员">
                <el-input v-model="queryParams.salesman" size="small" placeholder="请输入销售员"/>
            </el-form-item>
            <el-form-item label="发货方式">
                <el-input v-model="queryParams.FHFS" size="small" placeholder="请选择发货方式"/>
            </el-form-item>
            <el-form-item label="发货人">
                <el-input v-model="queryParams.FHR" size="small" placeholder="请输入发货人"/>
            </el-form-item>
            <el-form-item label="承运商">
                <el-input v-model="queryParams.CYS" size="small" placeholder="请输入承运商"/>
            </el-form-item> 
            <el-form-item label="币种">
                <el-input v-model="queryParams.BZ" size="small" placeholder="请选择币种"/>
            </el-form-item>
            <el-form-item label="汇率">
                <el-input v-model="queryParams.HL" size="small" placeholder="请输入汇率"/>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="queryParams.SHR" size="small" placeholder="请输入收货人"/>
            </el-form-item>
            <el-form-item label="收货人电话">
                <el-input v-model="queryParams.SHRDH" size="small" placeholder="请输入收货人电话"/>
            </el-form-item>
            <el-form-item label="收货地址">
                <el-input v-model="queryParams.SHDZ" size="small" placeholder="请输入收货地址"/>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="queryParams.remark" size="small" placeholder="请输入备注"/>
            </el-form-item>
            <el-form-item>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button>
      </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              icon="el-icon-plus"
              plain
              size="mini"
              type="primary"
              @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
             icon="el-icon-upload"
             plain
             size="mini"
             type="success"
             @click="handleImport"
             >导入销售订单</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon="el-icon-upload" plain size="mini" type="success" @click="handleBill">生成单证</el-button>
          </el-col>
          <!-- <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar> -->
        </el-row>
        

        <el-tooltip placement="top">
      <div slot="content">点击任意一行列，即可在下方查看销售单明细记录</div>
      <el-table :data="data" v-loading="loading" @row-click="showTab" :row-class-name="rowClassName">
        <el-table-column label="发货日期" prop="FHRQ"></el-table-column>
        <el-table-column label="合同号" prop="HTH"></el-table-column>
        <el-table-column label="对应单号" prop="DYDH"></el-table-column>
        <el-table-column label="发货单号" prop="FHDH"></el-table-column>
        <el-table-column label="客户" prop="customer"></el-table-column>
        <el-table-column label="销售员" prop="salesman"></el-table-column>
        <el-table-column label="发货方式" prop="FHFS"></el-table-column>
        <el-table-column label="发货人" prop="FHR"></el-table-column>
        <el-table-column label="承运商" prop="CYS"></el-table-column>
        <el-table-column label="币种" prop="BZ"></el-table-column>
        <el-table-column label="汇率" prop="HL"></el-table-column>
        <el-table-column label="收货人" prop="SHR"></el-table-column>
        <el-table-column label="收货人电话" prop="SHRDH"></el-table-column>
        <el-table-column label="收货地址" prop="SHDZ"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column
                              align="center"
                              class-name="small-padding fixed-width"
                              fixed="right"
                              label="操作"
                              min-width="280">
                              <template slot-scope="scope">
                                <el-button
                                  icon="el-icon-edit"
                                  size="mini"
                                  type="text"
                                  @click="handleUpdate(scope.row)"
                                  >修改</el-button>
                                  <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="text"
                                    @click="handleDelete(scope.row)"
                                    >删除</el-button>
                              </template>
                            </el-table-column>
      </el-table>
    </el-tooltip>

    <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" />
      <!-- 生成单证对话框 -->
        <el-dialog :title="titleBill" :visible.sync="openBill" append-to-body="append-to-body" width="512px">
            <el-col>
            <el-checkbox v-model="BG">报关</el-checkbox>
            <el-checkbox v-model="FP">发票</el-checkbox>
            <el-checkbox v-model="ZXD">装箱单</el-checkbox>
            </el-col>
            <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitFormBill">确 定</el-button>
                    <el-button @click="cancelBill">取 消</el-button>
                </div>
        </el-dialog>


<!-- 导入销售订单对话框 -->
      <el-dialog
        :title="titleImport"
        :visible.sync="openImport"
        append-to-body="append-to-body"
        width="1024px"
        >
          <el-form
            :model="XSFHImportDialog"
            label-width="120px"
            >
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单日期" prop="DDRQ">
                  <el-date-picker type="daterange" v-model="XSFHImportDialog.DDRQ" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable style="width: 240px" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单号" prop="DDH">
                  <el-input v-model="XSFHImportDialog.DDH" placeholder="请输入订单号" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同号" prop="HTH">
                  <el-input v-model="XSFHImportDialog.HTH" placeholder="请输入合同号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户合同号" prop="KHHTH">
                  <el-input v-model="XSFHImportDialog.KHHTH" placeholder="请输入客户合同号" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
              <el-form-item label="客户名称">
                <el-input v-model="XSFHImportDialog.KHMC" placeholder="请输入客户名称" clearable/>
              </el-form-item>
            </el-col>
            </el-row>
            <el-form-item>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQueryImport"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryImport"
        >重置
        </el-button>
      </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8">
          <!-- <el-col :span="1.5">
            <el-button
              icon="el-icon-plus"
              plain
              size="mini"
              type="primary"
              @click="handleCheckAll">全选</el-button>
          </el-col> -->
          <el-col :span="1.5">
            <el-button
             icon="el-icon-upload"
             plain
             size="mini"
             type="success"
             @click="handleDisappearAll"
             >全消</el-button>
          </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="salesTicketDateImport" tooltip-effect="dark" >
          <el-table-column type="selection" width="55"></el-table-column>
            <!-- <el-table-column label="序号" align="center" prop="XH"/> -->
             <el-table-column label="订单号" align="center" prop="DDH"></el-table-column>
            <el-table-column label="合同号" align="center" prop="HDH"></el-table-column>
            <el-table-column label="订单日期" align="center" prop="DDRQ"></el-table-column>
            <el-table-column label="交货日期" align="center" prop="JHRQ"></el-table-column>
            <el-table-column label="物品代号" align="center" prop="WPDH"></el-table-column>
            <el-table-column label="物品名称" align="center" prop="WPMC"></el-table-column>
            <el-table-column label="物品规格" align="center" prop="WPGG"></el-table-column>
            <el-table-column label="物品单位" align="center" prop="WPDW"></el-table-column>
            <el-table-column label="未发货数量" align="center" prop="WFHSL"></el-table-column>
            <el-table-column label="已发货数量" align="center" prop="YFHSL"></el-table-column>
            <el-table-column label="订单数量" align="center" prop="DDSL"></el-table-column>
            
            <el-table-column label="装箱数" align="center" prop="ZXS"></el-table-column>
           
            <el-table-column label="客户货号" align="center" prop="KHHH"></el-table-column>
            <el-table-column label="颜色" align="center" prop="YS"></el-table-column>
            <el-table-column label="属性" align="center" prop="SX"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitFormImport">确 定</el-button>
                    <el-button @click="cancelImport">取 消</el-button>
                </div>
      </el-dialog>
<!-- 添加或修改销售发货对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="open"
        append-to-body="append-to-body"
        width="1024px"
      >
        <el-form
          :model="XSFHDialog"
          label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="发货日期" prop="FHRQ">
              <el-date-picker type="date" placeholder="选择发货日期" v-model="XSFHDialog.FHRQ" style="width: 140px;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同号" prop="HTH">
              <el-input v-model="XSFHDialog.HTH" placeholder="请输入合同号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="对应单号" prop="DYDH">
              <el-input v-model="XSFHDialog.DYDH" placeholder="请输入对应单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货单号" prop="FHDH">
              <el-input v-model="XSFHDialog.FHDH" placeholder="请输入发货单号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户" prop="KH">
              <el-input v-model="XSFHDialog.KH" placeholder="请输入客户"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售员" prop="XSY">
              <el-input v-model="XSFHDialog.XSY" placeholder="请输入销售员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发货方式" prop="FHFS">
              <el-input v-model="XSFHDialog.FHFS" placeholder="请输入发货方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货人" prop="FHR">
              <el-input v-model="XSFHDialog.FHR" placeholder="请输入发货人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="承运商" prop="CYS">
              <el-input v-model="XSFHDialog.CYS" placeholder="请输入承运商"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="币种" prop="BZ">
              <el-input v-model="XSFHDialog.BZ" placeholder="请输入币种"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="汇率" prop="HL">
              <el-input v-model="XSFHDialog.HL" placeholder="请输入汇率"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人" prop="SHR">
              <el-input v-model="XSFHDialog.SHR" placeholder="请输入收货人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收货人电话" prop="SHRDH">
              <el-input v-model="XSFHDialog.SHRDH" placeholder="请输入收货人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址" prop="SHDZ">
              <el-input v-model="XSFHDialog.SHDZ" placeholder="请输入收货地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="XSFHDialog.remark" placeholder="请输入备注" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
      </el-dialog>

    <el-tabs v-model="activeName" v-if="showCard">
      <el-tab-pane label="销售发货明细" name="first">
        <h2 align="center">{{ HTH }}销售发货明细</h2>
        <el-table :data="salesTicketDate">
          <!-- <el-table-column label="序号" align="center" />
          <el-table-column label="产品描述" align="center">
            <el-table-column label="产品代号" align="center" />
            <el-table-column label="名称" align="center" />
            <el-table-column label="规格" align="center" />
            <el-table-column label="客户货号" align="center" />
            <el-table-column label="库存数量" align="center" />
          </el-table-column>
          <el-table-column label="装箱数" align="center"/>
          <el-table-column label="产品属性" align="center" />
          <el-table-column label="颜色" align="center" />
          <el-table-column label="主单位（单位、数量）" align="center"/>
          <el-table-column label="副单位（单位、数量）" align="center"/>
          <el-table-column label="备注" align="center"/>
          <el-table-column label="单个体积" align="center"/>
          <el-table-column label="总体积" align="center"/>
          <el-table-column label="参照数量" align="center"/>
          <el-table-column label="订单数量" align="center"/>
          <el-table-column label="已出库数" align="center"/>
          <el-table-column label="已记账数" align="center"/>
          <el-table-column label="外箱（长、宽、高、体积、总体积、单重、总重）" align="center"/> -->
          <el-table-column label="订单号" align="center" prop="DDH"></el-table-column>
            <el-table-column label="合同号" align="center" prop="HDH"></el-table-column>
            <el-table-column label="订单日期" align="center" prop="DDRQ"></el-table-column>
            <el-table-column label="交货日期" align="center" prop="JHRQ"></el-table-column>
            <el-table-column label="物品代号" align="center" prop="WPDH"></el-table-column>
            <el-table-column label="物品名称" align="center" prop="WPMC"></el-table-column>
            <el-table-column label="物品规格" align="center" prop="WPGG"></el-table-column>
            <el-table-column label="物品单位" align="center" prop="WPDW"></el-table-column>
            <el-table-column label="未发货数量" align="center" prop="WFHSL"></el-table-column>
            <el-table-column label="已发货数量" align="center" prop="YFHSL"></el-table-column>
            <el-table-column label="订单数量" align="center" prop="DDSL"></el-table-column>
            <el-table-column label="副单位" align="center">
              <el-table-column label="单位" prop="DW" align="center"/>
              <el-table-column label="数量" prop="SL" align="center"/>
            </el-table-column>
            <el-table-column label="装箱数" align="center" prop="ZXS"></el-table-column>
            <el-table-column label="外箱" align="center">
              <el-table-column label="长" align="center" prop="C"/>
              <el-table-column label="宽" align="center" prop="K"/>
              <el-table-column label="高" align="center" prop="G"/>
              <el-table-column label="体积" align="center" prop="TJ"/>
              <el-table-column label="总体积" align="center" prop="ZTJ"/>
              <el-table-column label="单重" align="center" prop="DZ"/>
              <el-table-column label="总重" align="center" prop="ZZ"/>
            </el-table-column>
            <el-table-column label="客户货号" align="center" prop="KHHH"></el-table-column>
            <el-table-column label="颜色" align="center" prop="YS"></el-table-column>
            <el-table-column label="属性" align="center" prop="SX"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    
    </div>
</template>

<script>
export default {
  data() {
    return {
      BG:true,
      FP:true,
      ZXD:true,
      //弹出层标题
      title:"",
      titleImport:"",
      titleBill:"",
      //是否显示弹出层
      open:false,
      openImport:false,
      openBill:false,
      //表单参数
      XSFHDialog: {},
      XSFHImportDialog: {},
      DYDH: '',
      showCard: true,
      activeName: 'first',
      salesTicketDate:[{
        DDH:'WMDD1911010004',
        HTH:'191103',
        DDRQ:'2016/11/01',
        JHRQ:'2016/12/10',
        WPDH:'BF306210',
        WPMC:'100"碟',
        WPGG:'10*10*10',
        WPDW:'个',
        WFHSL:'3984',
        YFHSL:'10032',
        DDSL:'14016',
        ZXS:'48',
        KHHH:'#18739',
        YS:'淡黄色',
        SX:'',
        DW:'0.8',
        SL:'2000',
        C:'0.3',
        K:'0.5',
        G:'0.8',
        TJ:'0.021',
        ZTJ:'30',
        DZ:'5',
        ZZ:'10000',
      },{
        DDH:'WMDD1911010005',
        HTH:'191103',
        DDRQ:'2020/01/21',
        JHRQ:'2020/02/13',
        WPDH:'BF306210',
        WPMC:'5000"碟',
        WPGG:'20*30*15',
        WPDW:'个',
        WFHSL:'3984',
        YFHSL:'10032',
        DDSL:'14016',
        ZXS:'48',
        KHHH:'#19322',
        YS:'纯白色',
        SX:'',
          DW:'0.8',
        SL:'2000',
        C:'2.5',
        K:'2.5',
        G:'1.7',
        TJ:'14.54',
        ZTJ:'50',
        DZ:'6',
        ZZ:'30000',
      },{
        DDH:'WMDD1911010005',
        HTH:'191103',
        DDRQ:'2017/03/01',
        JHRQ:'2017/03/16',
        WPDH:'BF306210',
        WPMC:'6000"碟',
        WPGG:'2.5*3.5*2.5',
        WPDW:'个',
        WFHSL:'3984',
        YFHSL:'10032',
        DDSL:'14016',
        ZXS:'48',
        KHHH:'#17449',
        YS:'魔力色',
        SX:'',
          DW:'0.8',
        SL:'2000',
        C:'0.8',
        K:'0.8',
        G:'1.2',
        TJ:'1.67',
        ZTJ:'24',
        DZ:'8',
        ZZ:'23000',
      }],
      salesTicketDateImport:[{
        DDH:'WMDD1911010004',
        HTH:'191103',
        DDRQ:'2019/11/01',
        JHRQ:'2019/12/10',
        WPDH:'BF306210',
        WPMC:'10"碟',
        WPGG:'0*0*0',
        WPDW:'个',
        WFHSL:'3984',
        YFHSL:'10032',
        DDSL:'14016',
        ZXS:'48',
        KHHH:'',
        YS:'',
        SX:'',
      },{
        DDH:'WMDD1911010005',
        HTH:'191103',
        DDRQ:'2019/11/01',
        JHRQ:'2019/12/10',
        WPDH:'BF306210',
        WPMC:'10"碟',
        WPGG:'0*0*0',
        WPDW:'个',
        WFHSL:'3984',
        YFHSL:'10032',
        DDSL:'14016',
        ZXS:'48',
        KHHH:'',
        YS:'',
        SX:'',
      },{
        DDH:'WMDD1911010005',
        HTH:'191103',
        DDRQ:'2019/11/01',
        JHRQ:'2019/12/10',
        WPDH:'BF306210',
        WPMC:'10"碟',
        WPGG:'0*0*0',
        WPDW:'个',
        WFHSL:'3984',
        YFHSL:'10032',
        DDSL:'14016',
        ZXS:'48',
        KHHH:'',
        YS:'',
        SX:'',
      }],
      
      data: [{
        DYDH: 'YL901A',
        HTH: '24BC0701',
        FHDH: 'FH2409230001',
        FHRQ: '2024-09-23',
        customer: 'D.XTA. SARL',
        salesman: '姜志国',
        FHFS: '邮寄',
        FHR:'姜志国',
        CYS:'联邦快递(中国)有限公司',
        BZ:'日元',
        HL:'1',
        SHR:'姜志国',
        SHRDH:'17892335477',
        SHDZ :'大版',
        remark:'',
        HTJE:'200000',
      },{
        DYDH: 'YL901A',
        HTH: '24BC0702',
        FHDH: 'FH2409230001',
        FHRQ: '2024-09-24',
        customer: 'D.XTA. SARL',
        salesman: '陈庆',
        FHFS: '空运',
        FHR:'陈庆',
        CYS:'联邦快递(中国)有限公司',
        BZ:'美元',
        HL:'8',
        SHR:'陈庆',
        SHRDH:'13697886520',
        SHDZ :'佛罗里达州',
        remark:'',
        HTJE:'150000',
      },{
        DYDH: 'YL901BCC',
        HTH: '24BC0705',
        FHDH: 'FH240923000433',
        FHRQ: '2024-09-23',
        customer: 'D.XTA. SARL',
        salesman: '杨莹',
        FHFS: '海运',
        FHR:'杨莹',
        CYS:'中集现代物流发展有限公司',
        BZ:'英镑',
        HL:'10',
        SHR:'杨莹',
        SHRDH:'13877545888',
        SHDZ :'爱尔兰',
        remark:'',
        HTJE:'300000',
      }],
      total: 3,
      loading: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 高亮行数
      HTH: '',
      DYDH: '',
    }
  },
  methods: {
    // 显示高亮
    rowClassName({ row }) {
      return row.HTH == this.HTH ? 'selected-row' : ''; // 判断是否选中
    },
    showTab(row) {
      this.HTH = row.HTH;
      this.DYDH = row.DYDH;
      this.showCard = true;
    },
    handleImport() {
      this.openImport = true;
      this.titleImport = "导入销售订单"
    },
    // 新增按钮操作
    handleAdd() {
      this.open = true;
      this.title = "添加销售发货";
      this.XSFHDialog.FHRQ = '';
      this.XSFHDialog.HTH = '';
    },
    // 修改按钮操作
    handleUpdate(row) {
      this.open = true;
      this.title = "修改销售发货";
      this.XSFHDialog.FHRQ = row.FHRQ;
      this.XSFHDialog.HTH = row.HTH;
    },
    //取消按钮
    cancel() {
      this.open = false;
    },
    cancelImport() {
      this.openImport = false;
    },
    //提交按钮
    submitForm() {
      this.open = false;
    },
    submitFormImport() {
      this.openImport = false;
    },
    //删除按钮操作
    handleDelete(row) {

    },
  
    //全消按钮
    handleDisappearAll() {
      this.$refs.multipleTable.clearSelection();
    },
    handleBill() {
        this.titleBill = "生成单证";
        this.openBill = true;
        this.BG = true;
        this.FP = true;
        this.ZXD = true;
    },
    submitFormBill() {
        this.openBill = false;
        this.$message({
            message: '生成单证成功',
            type: 'success'
        });  
    },
    cancelBill() {
        this.openBill = false;
    }

  },
}
</script>

<style>
.radio-group .el-radio {
  margin-right: 0px;
}

.radio-group {
  border-radius: 1px;
  border: 1px solid #dcdfe6;
}
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>
